<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList(1)">
      <el-form-item label="选择配置项：">
        <el-select
          v-model="confTypeSelectedList[confTypeIndex]"
          :placeholder="confType.name"
          style="width: 140px;margin-right: 8px;"
          v-for="(confType,confTypeIndex) in confTypeOptionList"
          :key="confTypeIndex"
          @change="bannerSelect"
          class="banner-select">
          <el-option
            v-for="(option,optionIndex) in confType.options"
            :key="optionIndex"
            :label="option.label"
            :value="option.value">
          </el-option>
        </el-select>
      </el-form-item>
      <br/>
      <el-form-item>
        <el-input v-model="dataForm.keyword.name" placeholder="配置名称" clearable style="width: 200px;"></el-input>
        <el-button @click="getDataList(1)">查询</el-button>
        <el-button v-if="isAuth('picbook:appconf:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        prop="id"
        width="80"
        header-align="center"
        align="center"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        width="240"
        label="配置名称">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center" width="180"
        label="配置时间">
        <template slot-scope="scope">
          新增时间<br/>{{scope.row.createTime}}<br/>
          <div v-if="scope.row.updateTime"><br/>修改时间<br/>{{scope.row.updateTime}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="categoryId"
        header-align="center"
        align="center"
        :label="confTypeOptionList[selectedConfTypeIndex].options[selectedOptionIndex].tableHeaderContentlabel"
        min-width="240">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.contentList" :key="index">
            {{9>index?item:(index==9?'……':'')}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        width="70"
        label="状态">
        <!--上下架状态(1上架,0下架) -->
        <template slot-scope="scope">
          {{scope.row.status==1?'上架':'下架'}}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center" fixed="right" width="130"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="modifyStatus(scope.row.id,scope.row.status==0?'1':'0')">
            {{scope.row.status==0?'上架':'下架'}}
          </el-button>
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <!--<el-button type="text" size="small" @click="previewPicBook(scope.row.id)">预览</el-button>-->
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update-banner v-if="addOrUpdateBannerVisible" ref="addOrUpdateBanner" @refreshDataList="getDataList"/>
    <add-or-update-audio v-if="addOrUpdateAudioVisible" ref="addOrUpdateAudio" @refreshDataList="getDataList"/>
    <add-or-update-category v-if="addOrUpdateCategoryVisible" ref="addOrUpdateCategory" @refreshDataList="getDataList"/>
    <add-or-update-mini-app v-if="addOrUpdateMiniAppVisible" ref="addOrUpdateMiniApp" @refreshDataList="getDataList"/>
    <add-or-update-category v-if="addOrUpdateCategoryVisible" ref="addOrUpdateCategory" @refreshDataList="getDataList"/>
    <add-or-update-audio-category v-if="addOrUpdateAudioCategoryVisible" ref="addOrUpdateAudioCategory" @refreshDataList="getDataList"/>
  </div>
</template>

<script>
  import AddOrUpdateAudio from './adconf-audio-add-or-update.vue'
  import AddOrUpdateBanner from './adconf-banner-add-or-update'
  import AddOrUpdateMiniApp from './adconf-miniapp-add-or-update.vue'
  import AddOrUpdateCategory from './adconf-category-add-or-update'
  import AddOrUpdateAudioCategory from './adconf-audio-category-add-or-update'
  export default {
    data () {
      return {
        confType: '0',
        selectedConfTypeIndex: '0',//选择的配置类的索引
        selectedOptionIndex: '0',//选择的配置类中选项的索引
        confTypeSelectedList: ['0-0-0', '', ''],

        // confTypeIndex: 0,
        // confTypeList: [
        //   {
        //     index: 0,
        //     label: 'banner',
        //     name: '绘本页配置',
        //     tableHeaderContentName: '包含轮播内容',
        //     confSecondTypeList: [{label: 0, name: '首页轮播'}, {label: 1, name: '分类页轮播'}]
        //   },
        //   {index: 1, label: 'hot', name: '热门绘本', tableHeaderContentName: '热门绘本内容'},
        //   // {index: 2, label: 'categoryBanner', name: '分类页轮播', tableHeaderContentName: '包含轮播内容'},
        //   {index: 2, label: 'category', name: '分类入口', tableHeaderContentName: '入口配置内容'},
        //   {index: 3, label: 'recommend', name: '分类推荐', tableHeaderContentName: '入口配置内容'},
        //   {index: 4, label: 'bookshelf', name: '书架推荐', tableHeaderContentName: '书架推荐内容'},
        //   {index: 5, label: 'audio', name: '音频故事', tableHeaderContentName: '音频故事内容'},
        //   {index: 6, label: 'miniAppSelect', name: '小程序精选', tableHeaderContentName: '小程序精选内容'}
        // ],
        //   if (this.confType == 'banner' || this.confType == 'hot' || this.confType == 'recommend' || this.confType == 'bookshelf' || this.confType == 'audio') {
        //   this.addOrUpdateBannerVisible = true
        //   ref = 'addOrUpdateBanner'
        // } else if (this.confType === 'miniAppSelect') { // 小程序配置精选
        //   this.addOrUpdateMiniAppVisible = true
        //   ref = 'addOrUpdateMiniApp'
        // } else {// 分类入口
        //   this.addOrUpdateCategoryVisible = true
        //   ref = 'addOrUpdateCategory'
        // }

        //visiblePopupIndex:  0:AddOrUpdateBanner,1:AddOrUpdateAudio,2:AddOrUpdateCategory,3:AddOrUpdateMiniApp 4:AddOrUpdateAudioCategory
        confTypeOptionList:
          [
            {
              label: 'banner',
              name: '绘本页配置',
              options:
                [{
                  value: '0-0-0',
                  label: '首页轮播',
                  tableHeaderContentlabel: '包含轮播内容',
                  visiblePopupIndex: 0,
                  popup: {
                    title: '首页轮播配置',
                    attentionTip: '注意：暂时最少配置3条轮播图，最多配置6条轮播图',
                    maxAddTip: '最多配置6条轮播图',
                    maxCount: 6,
                    isUploadUrl: true,
                    confType: 'banner',
                    confSecondType: '0'
                  }
                },
                  {
                    value: '0-1-1',
                    label: '绘本页轮播',
                    tableHeaderContentlabel: '包含轮播内容',
                    visiblePopupIndex: 0,
                    popup: {
                      title: '分类页轮播配置',
                      attentionTip: '注意：暂时最少配置3条轮播图，最多配置6条轮播图',
                      maxAddTip: '最多配置6条轮播图',
                      maxCount: 6,
                      isUploadUrl: true,
                      confType: 'banner',
                      confSecondType: '1'
                    }
                  },
                  {
                    value: '0-2-category',
                    label: '绘本分类入口',
                    tableHeaderContentlabel: '入口配置内容',
                    visiblePopupIndex: 2,
                    popup: {
                      title: '绘本分类入口配置',
                      attentionTip: '',
                      maxCount: '',
                      maxAddTip: '',
                      confType: 'category',
                      confSecondType: ''
                    }
                  },
                  {
                    value: '0-3-recommend',
                    label: '绘本分类推荐',
                    tableHeaderContentlabel: '入口配置内容',
                    visiblePopupIndex: 0,
                    popup: {
                      title: '绘本分类推荐配置',
                      attentionTip: '注意：暂时最多配置30条分类推荐',
                      maxAddTip: '最多配置30条分类推荐',
                      maxCount: 30,
                      confType: 'recommend',
                      confSecondType: ''
                    }
                  },
                  {
                    value: '0-4-audio',
                    label: '音频故事',
                    tableHeaderContentlabel: '音频故事精选内容',
                    visiblePopupIndex: 3,
                    popup: {
                      title: '音频故事配置',
                      attentionTip: '注意：暂时最多配置50条音频故事',
                      maxAddTip: '',
                      maxCount: 50,
                      confType: 'audio',
                      confSecondType: ''
                    }
                  }
                ]
            },
            {
              label: 'audio',
              name: '听书页配置',
              options:
                [{
                  value: '1-0-banner',
                  label: '听书页轮播',
                  tableHeaderContentlabel: '包含轮播内容',
                  visiblePopupIndex: 1,
                  popup: {
                    title: '听书页轮播配置',
                    attentionTip: '注意：暂时最少配置3条轮播图，最多配置6条轮播图',
                    maxAddTip: '最多配置6条轮播图',
                    maxCount: 6,
                    confType: 'banner',
                    confSecondType: '',
                    isUploadUrl: true,
                  }
                },
                  {
                    value: '1-1-category',
                    label: '听书分类入口',
                    tableHeaderContentlabel: '入口配置内容',
                    visiblePopupIndex: 4,
                    popup: {
                      title: '听书分类页入口配置',
                      attentionTip: '',
                      maxAddTip: '',
                      maxCount: '',
                      confType: 'category',
                      confSecondType: ''
                    }
                  },
                  {
                    value: '1-2-recommend',
                    label: '听书分类推荐',
                    tableHeaderContentlabel: '入口配置内容',
                    visiblePopupIndex: 1,
                    popup: {
                      title: '听书分类推荐配置',
                      attentionTip: '注意：暂时最多配置30条分类推荐',
                      maxAddTip: '最多配置30条分类推荐',
                      maxCount: 30,
                      confType: 'recommend',
                      confSecondType: ''
                    }
                  },
                ]
            },
            {
              label: 'other',
              name: '其他配置',
              options:
                [{
                  value: '2-0-bookshelf',
                  label: '书架推荐',
                  tableHeaderContentlabel: '书架推荐内容',
                  visiblePopupIndex: 0,
                  popup: {
                    title: '书架推荐配置',
                    attentionTip: '注意：暂时最多配置9条书架推荐',
                    maxAddTip: '最多配置9条书架推荐',
                    maxCount: 9,
                    confType: 'bookshelf',
                    confSecondType: ''
                  }
                },
                  {
                    value: '2-1-hot',
                    label: '热门推荐',
                    tableHeaderContentlabel: '热门绘本内容',
                    visiblePopupIndex: 0,
                    popup: {
                      title: '热门绘本配置',
                      attentionTip: '',
                      maxAddTip: '',
                      maxCount: '',
                      confType: 'hot',
                      confSecondType: ''
                    }
                  },
                  {
                    value: '2-2-miniAppSelect',
                    label: '小程序精选',
                    tableHeaderContentlabel: '小程序精选内容',
                    visiblePopupIndex: 3,
                    popup: {
                      title: '小程序精选配置',
                      attentionTip: '注意：暂时最多配置50条小程序精选',
                      maxAddTip: '',
                      maxCount: 50,
                      confType: 'miniAppSelect',
                      confSecondType: ''
                    }
                  }
                ]
            }
          ],
        dataForm: {
          keyword: {
            name: ''
          }
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisibleList: [this.addOrUpdateBannerVisible, this.addOrUpdateCategoryVisible, this.addOrUpdateMiniAppVisible],
        refList: ['addOrUpdateBanner', 'addOrUpdateAudio', 'addOrUpdateCategory', 'addOrUpdateMiniApp','addOrUpdateAudioCategory'],
        addOrUpdateBannerVisible: false,
        addOrUpdateAudioVisible: false,
        addOrUpdateCategoryVisible: false,
        addOrUpdateMiniAppVisible: false,
        addOrUpdateAudioCategoryVisible:false
      }
    },
    components: {
      AddOrUpdateAudio,
      AddOrUpdateBanner,
      AddOrUpdateCategory,
      AddOrUpdateMiniApp,
      AddOrUpdateAudioCategory
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList (formSearch) {
        // 搜索框来源
        if (formSearch === 1) {
          this.pageIndex = 1
        }
        this.dataListLoading = true
        var confType = this.confType
        var confSecondType = ''
        if (confType == 0 || confType == 1) {
          confSecondType = confType
          confType = 'banner'
        }
        //绘本和其它
        var url = '/picbook/appconf/list/' + confType
        if (this.selectedConfTypeIndex == 1) {
          //音频
          url = '/picbook/appconf/v2/list/audio/' + confType
        }
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'post',
          data: this.$http.adornData({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'keyword': this.dataForm.keyword,
            'conftype': confType,
            'confSecondType': confSecondType
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        let _this = this
        let option = _this.confTypeOptionList[_this.selectedConfTypeIndex].options[_this.selectedOptionIndex]
        switch (option.visiblePopupIndex) {
          case 0:
            this.addOrUpdateBannerVisible = true
            break
          case 1:
            this.addOrUpdateAudioVisible = true
            break
          case 2:
            this.addOrUpdateCategoryVisible = true
            break
          case 3:
            this.addOrUpdateMiniAppVisible = true
            break
          case 4:
            this.addOrUpdateAudioCategoryVisible = true
            break
        }
        _this.addOrUpdateVisibleList[option.visiblePopupIndex] = true
        _this.$nextTick(() => {
          // _this.$refs[ref].init(id, _this.confType, _this.confSecondType)
          var ref = _this.refList[option.visiblePopupIndex]
          _this.$refs[ref].init(id, option.popup)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.id
        })
        // this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        this.$confirm(`确定[${id ? '删除' : '批量删除'}]?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/picbook/appconf/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      //上下架
      modifyStatus (id, status) {
        this.$http({
          url: this.$http.adornUrl('/picbook/appconf/modifyStatus/' + this.confType),
          method: 'post',
          data: this.$http.adornData({
            'id': id,
            'status': status
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.getDataList()
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      //轮播选择
      bannerSelect (value) {
        let _this = this
        let valueArr = value.split('-')
        _this.selectedConfTypeIndex = valueArr[0]
        _this.selectedOptionIndex = valueArr[1]
        _this.confType = valueArr[2]
        _this.confTypeOptionList.forEach(function (item, index) {
          if (_this.selectedConfTypeIndex != index) {
            _this.confTypeSelectedList[index] = ''
          }
        })
        this.getDataList(1)
      }
    }
  }
</script>
<style lang="less" scoped>
  .selectedConfType {
    color: red;
    border-color: red;
    background-color: white;
  }
</style>
